<template>
	<view>

		<view class="top-status">
			<text>{{detailsObject.flowStatusName}}</text>
		</view>

		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="车辆订单信息" label-color="#333333"></u-icon>
			</view>


			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view class="text-line">
				<text class="text-name">车辆订单号:</text>
				<text class="text-value" style="flex-grow: 0;">{{filterNull(detailsObject.orderCarCode)}}</text>

				<text class="tenacy" v-if="detailsObject.tenancy">{{detailsObject.tenancy}}期</text>
			</view>

			<view class="text-line">
				<text class="text-name">租赁类型:</text>
				<text class="text-value">{{filterNull(detailsObject.rentTypeName)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">客户名称:</text>
				<text class="text-value">{{filterNull(detailsObject.customerName)}}</text>
			</view>

			<view class="text-line" @click="makePhone">
				<text class="text-name">联系电话:</text>
				<text class="text-value" style="flex-grow: 0;">{{filterNull(detailsObject.customerTel)}}</text>

				<image class="phone" src="../../../static/coupon/callPhone.png" mode="scaleToFill"
					v-if="detailsObject.customerTel"></image>
			</view>

			<view class="text-line">
				<text class="text-name">出租方:</text>
				<text class="text-value">{{filterNull(detailsObject.lessorName)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">品牌/车系/车型:</text>
				<text
					class="text-value">{{filterNull(detailsObject.brandName)+'/'+filterNull(detailsObject.seriesName)+'/'+filterNull(detailsObject.modelName)}}</text>
			</view>

			<view class="text-line"
				v-if="detailsObject.rentType==1 || detailsObject.rentType==5 || detailsObject.rentType==2">
				<text class="text-name">租赁时间:</text>
				<text
					class="text-value">{{filterNull(detailsObject.timeStartRent)}}至{{filterNull(detailsObject.timeFinishRent)}}</text>
			</view>

			<view class="text-line" v-if="detailsObject.rentType==5">
				<text class="text-name">金融公司名称:</text>
				<text class="text-value">{{filterNull(detailsObject.financeCompanyName)}}</text>
			</view>

			<view class="text-line" v-if="detailsObject.rentType==1 || detailsObject.rentType==2">
				<text class="text-name" v-if="detailsObject.rentType==2">付款方式:</text>
				<text class="text-name" v-else>还款方式:</text>

				<text class="text-value">{{filterNull(detailsObject.paymentMethodName)}}</text>
			</view>

			<view class="text-line" v-if="detailsObject.rentType==1 || detailsObject.rentType==2">
				<text class="text-name">还款日:</text>
				<text class="text-value">{{filterNull(detailsObject.paymentDay)}}</text>
			</view>


			<view class="text-line" v-if="detailsObject.rentType==2 || detailsObject.rentType==5">
				<text class="text-name">是否有尾款:</text>

				<text class="text-value" v-if="detailsObject.hasBalancePayment==1">是</text>
				<text class="text-value" v-else-if="detailsObject.hasBalancePayment==0">否</text>
				<text class="text-value" v-else>--</text>
			</view>

			<view class="text-line" v-if="detailsObject.rentType==1">
				<text class="text-name">免费用车天数:</text>
				<text class="text-value">{{filterNull(detailsObject.freeDays)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">车辆已购保险:</text>
				<text class="text-value" v-if="detailsObject.insuranceItems.length<=0">--</text>
			</view>

			<view class="insurance-wrap" v-if="detailsObject.insuranceItems.length>0">
				<text v-for="(item, index) in strSplit(detailsObject.insuranceItems)" :key="item">
					{{item}}
				</text>
			</view>

			<view class="text-line">
				<text class="text-name">订单备注:</text>
				<text class="text-value">{{filterNull(detailsObject.orderDesc)}}</text>
			</view>

			<view v-if="detailsObject && detailsObject.moneyPlanList">
				<view class="text-line" v-for="(item, index) in detailsObject.moneyPlanList" :key="item.moneyDesc">
					<text class="text-name">{{item.moneyDesc}}:</text>
					<text class="text-value">￥{{item.moneyAmount}}</text>
				</view>
			</view>
		</view>

		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="车辆信息" label-color="#333333"></u-icon>
			</view>


			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>


			<view class="text-line">
				<text class="text-name">车架号:</text>
				<text class="text-value">{{filterNull(detailsObject.vinNo)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{filterNull(detailsObject.carNo)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">车辆归属:</text>
				<text class="text-value">{{filterNull(detailsObject.deptName)}}</text>
			</view>


			<view class="text-line">
				<text class="text-name">随车物品:</text>
				<text class="text-value" v-if="!detailsObject.accessoryItemsName">--</text>
			</view>

			<view class="insurance-wrap"
				v-if="detailsObject.accessoryItemsName && detailsObject.accessoryItemsName.length>0">
				<text v-for="(item, index) in strSplit(detailsObject.accessoryItemsName)" :key="item">
					{{item}}
				</text>
			</view>

			<view class="text-line">
				<text class="text-name">车辆备注:</text>
				<text class="text-value">{{filterNull(detailsObject.carDesc)}}</text>
			</view>

		</view>

		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="交车信息" label-color="#333333"></u-icon>
			</view>

			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view class="text-line">
				<text class="text-name">交车时间:</text>
				<text class="text-value">{{filterNull(detailsObject.timeDelivery)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">备注:</text>
				<text class="text-value">{{filterNull(detailsObject.deliveryDesc)}}</text>
			</view>

			<view style="margin: 0 0 20upx 20upx;" v-if="detailsObject.deliveryPicList!=null">
				<view class="text-name" style="margin-bottom: 18upx;">交车附件:</view>
				<u-album :urls="deliverImgList" rowCount="4"></u-album>
			</view>

			<view class="text-line" v-if="detailsObject.deliveryFileList!=null" v-for="(item, index) in deliverFileList"
				:key="index" @click="checkFile(item)">
				<view class="text-name">{{item.nameFile}}</view>
				<view class="text-value" style="color: #12B9A3;">查看</view>
			</view>

			<view class="text-line">
				<text class="text-name">交车当前里程数:</text>
				<text class="text-value">{{filterNull(detailsObject.deliveryMileage)}}</text>
			</view>

		</view>

		<view class="item">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="业务员" label-color="#333333"></u-icon>
			</view>

			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view class="text-line">
				<text class="text-name">姓名:</text>
				<text class="text-value">{{filterNull(detailsObject.sysUserName)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">电话:</text>
				<text class="text-value">{{filterNull(detailsObject.sysUserPhone)}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">所属公司:</text>
				<text class="text-value">{{filterNull(detailsObject.sysUserDeptName)}}</text>
			</view>


		</view>

		<view class="item" v-if="detailsObject.orderCarReceivablesList.length>0">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="付款计划" label-color="#333333"></u-icon>
				<text style="color: #E04B28;font-size: 28upx;"
					v-if="detailsObject.overDays>0">{{detailsObject.overDaysDesc}}</text>
			</view>

			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view class="fee-list" v-for="(item, oderindex) in detailsObject.orderCarReceivablesList" :key="oderindex"
				@click="feeItemClick(item)">

				<view class="fee-item">
					<text>{{item.collectionTypeName}}</text>
					<text>{{item.receivableDate}}</text>
					<text>￥{{item.uncollectedAmount}}</text>
					<view style="display: flex;">
						<!-- 已支付,未出账单，已退款，待付款 -->
						<text v-if="item.status==0 || item.status==1"
							style="color: #12B9A3;">{{filterNull(item.statusStr)}}</text>
						<text wx:else>{{filterNull(item.statusStr)}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

			</view>
		</view>

		<view class="item " v-if="detailsObject.uncollectedAmount>0">

			<view class="coupon-wrap">
				<text class="coupon-wrap-title">优惠券</text>
				<view class="coupon-wrap-sel" @click="selCoupon">
					<text
						v-if="discountItem && discountItem.money>0">{{discountItem.couponName+" "}}￥{{discountItem.money}}</text>
					<text v-else>{{canuselist.length>0?'选择优惠券':'无可用优惠券'}}</text>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>

			<view style="margin: 0 0 0 40upx;">
				<text style="font-size: 24upx;color: #333333;">应付金额(元):</text>
				<text
					style="font-size: 24upx;color: #12B9A3;margin-left: 10upx;">{{detailsObject.uncollectedAmount}}</text>
			</view>
			<view style="margin: 10upx 0 0 40upx;">
				<text style="font-size: 24upx;color: #333333;">优惠金额(元):</text>
				<text
					style="font-size: 24upx;color: #12B9A3;margin-left: 10upx;">{{discountItem && discountItem.money ? discountItem.money:'0'}}</text>
			</view>
			<view style="margin: 10upx 0 0 40upx;">
				<text style="font-size: 24upx;color: #333333;">实付金额(元):</text>
				<text style="font-size: 24upx;color: #12B9A3;margin-left: 10upx;">{{realpay}}</text>
			</view>

		</view>




		<view class="item" v-if="isEnv!=3 && detailsObject.uncollectedAmount>0 && showDaikou">

			<view class="title-wrap">
				<u-icon name="order" color="#12B9A3" label="支付方式" label-color="#333333"></u-icon>
			</view>

			<u-line color="#efefef" dashed margin="0 0 10px"></u-line>

			<view style="margin-left: 40upx;">
				<u-radio-group v-model="selType" placement="column" @change="groupChange">
					<u-radio labelSize="12px" size="16" :customStyle="{marginBottom: '8px'}"
						v-for="(pitem, pindex) in payTypeList" :key="pindex" activeColor="#12B9A3" :label="pitem"
						:name="pitem" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>

		</view>


		<view v-if="detailsObject.uncollectedAmount>0" style="height:150upx"></view>

		<view class="bottom-btn bottom" v-if="isEnv!=3 && detailsObject.uncollectedAmount>0">
			<text @click="btnClick">立即支付￥{{realpay}}</text>
		</view>

		<u-popup safeAreaInsetTop mode="bottom" :show="showCoupon" round="10" closeable @close="closePop">

			<view class="pop" @touchmove.stop.prevent="preventHandler">
				<text class="pop-title">优惠券</text>

				<view class="pop-top-wrap">
					<text style="font-size: 28upx;color: #131313;font-weight: bold;"
						:style="{color:(selectUse===0?'#12B9A3':'#131313')}"
						@click="selUse(0)">可用优惠券（{{canuselist.length}}）</text>
					<text style="margin-left: 64upx;font-size: 28upx;color: #131313;font-weight: bold;"
						:style="{color:(selectUse===1?'#12B9A3':'#131313')}"
						@click="selUse(1)">不可用优惠券（{{nouselist.length}}）</text>

				</view>

				<text style="font-size: 24upx;color: #333333;margin: 25upx 0 0;" v-if="selectUse===0 && tempSelect>=0">
					已选中优惠券，使用优惠券1张，共抵扣￥{{tempDiscount}}
				</text>

				<view style="height: 25upx;"></view>

				<scroll-view scroll-y="true" style="height: 500upx;">

					<template v-if="couponList.length > 0">

						<view class="coupon-item" v-for="(citem, cindex) in couponList" :key="citem.memberId"
							@click="couponItemclick(cindex)">

							<view v-if="selectUse===0">
								<u-icon name="checkmark-circle-fill" color="#333333" v-if="tempSelect === cindex">
								</u-icon>

								<u-icon name="checkmark-circle" color="#333333" v-else></u-icon>
							</view>

							<view class="wrap">

								<view class="content">
									<view class="leftContent">
										<view class="amount">
											<view class="couponAmount">
												<text class="amount_unit">¥</text>
												<text class="realAmount">{{citem.money}}</text>
											</view>
											<text class="useInfo">满{{citem.conditionMoney}}可用</text>
										</view>
										<view class="contentInfo">
											<text class="activity-name">{{filterNull(citem.couponName)}}</text>
											<text
												style="margin-top: 20upx;color: #666;font-size: 16upx;">{{filterNull(citem.useTypeName)}}</text>
											<text class="time">{{filterNull(citem.preferentialInfo)}}</text>
											<view class="useType" @click="changeDesc">
												<text class="conponType">{{citem.useType === 1?'全场通用 ':'指定类型'}}</text>
												<image v-if="false" class="arrow"
													src="/static/coupon/coupon_up.png" mode=""></image>
											</view>

										</view>

									</view>
									<view class="rightContent">
										<text class="conponType1">{{filterNull(detailsObject.rentTypeName)}}</text>
									</view>
								</view>

								<image class="cover" src="/static/mine/coupon-bg.png" mode="scaleToFill">
								</image>

							</view>
						</view>
					</template>

					<template v-else>
						<u-empty mode="coupon" text="暂无优惠券" />
					</template>
				</scroll-view>

				<button class="pop-btn" @click="commitCoupon">确定</button>

			</view>

		</u-popup>

	</view>
</template>

<script>
	import couponCell from '../../../components/coupon/coupon-cell.vue'
	import {
		ordercarinfo,
		payOrderCoupon,
		apppay,
		commonenv,
		paycancel,
		juhepay,
		getDaiKouFlag
	} from '../../../common/api.js';

	export default {
		components: {
			couponCell
		},
		data() {
			return {
				isEnv: 0,
				id: '',
				deliverImgList: [],
				deliverFileList: [],
				discountIndex: -1, //选定的优惠券索引
				showCoupon: false,
				couponList: [], //当前展示的列表
				canuselist: [], //可用列表
				nouselist: [], //不可用列表
				selectUse: 0, //0可用 1不可用
				tempSelect: -1, //暂时选择得优惠券索引
				detailsObject: {},
				payTypeList: ["微信支付", "行知支付"],
				selType: "微信支付",
				showDaikou:false
			}
		},
		computed: {
			//实付金额
			realpay() {
				if (this.canuselist[this.discountIndex]) {
					// let v = this.detailsObject.uncollectedAmount - this.canuselist[this.discountIndex].money;
					let v = this.detailsObject.uncollectedAmount.sub(this.canuselist[this.discountIndex].money);
					return v > 0 ? v : 0;
				} else {
					return this.detailsObject.uncollectedAmount
				}
			},
			deptId() {
				return this.$store.state.user.deptId;
			},
			memberNo() {
				return this.$store.state.user.userInfo.customerId;
			},
			//暂时选择的优惠券金额
			tempDiscount() {
				return this.canuselist[this.tempSelect] ? this.canuselist[this.tempSelect].money : 0;
			},
			//选定的优惠券实体
			discountItem() {
				return this.canuselist[this.discountIndex] ? this.canuselist[this.discountIndex] : {};
			}
		},

		onLoad(op) {
			this.id = op.id;
			this.getData();
			this.getEnv();
			getDaiKouFlag().then(res=>{
				this.showDaikou = res==1
			})
		},

		methods: {
			getEnv() {
				commonenv().then(res => {
					this.isEnv = res;
				})
			},

			preventHandler() {

			},

			//优惠券切换（有用-无用）
			selUse(index) {
				this.selectUse = index;
				if (0 === index) {
					this.couponList = this.canuselist
				} else {
					this.couponList = this.nouselist
				}
			},

			//获取详情信息
			getData() {
				ordercarinfo(this.id).then(res => {
					this.detailsObject = res;

					if (!uni.$u.test.isEmpty(this.detailsObject.deliveryPicList)) {

						this.deliverImgList = this.detailsObject.deliveryPicList.filter(item => {
							return item.typeFile == 1;
						}).map(item => {
							return this.baseImageUrl + item.url;
						})

						console.log('图片结果', this.deliverImgList);

					}

					if (!uni.$u.test.isEmpty(this.detailsObject.deliveryFileList)) {


						this.deliverFileList = this.detailsObject.deliveryFileList.filter(item => {
							return item.typeFile == 2;
						}).map(item => {
							return {
								nameFile: item.nameFile,
								url: item.url
							};
						})

						console.log('文件结果', this.deliverFileList);

					}

					if (this.detailsObject.uncollectedAmount > 0) {
						this.getCouponList();
					}


				})
			},

			//获取优惠券两个list
			getCouponList() {
				//有用的
				payOrderCoupon({
					memberNo: this.memberNo,
					unitno: this.deptId,
					rentType: this.detailsObject.rentType,
					receivableNos: this.detailsObject.receivablesNo,
					itemNo: this.detailsObject.modelId,
					orderType: 2,
					available: 1,
					pageNo: 1,
					pageNum: 10000
				}).then(res => {
					this.canuselist = res;
					this.couponList = this.canuselist;
				})

				//无用的
				payOrderCoupon({
					memberNo: this.memberNo,
					unitno: this.deptId,
					rentType: this.detailsObject.rentType,
					receivableNos: this.detailsObject.receivablesNo,
					itemNo: this.detailsObject.modelId,
					orderType: 2,
					available: 2,
					pageNo: 1,
					pageNum: 10000
				}).then(res => {
					this.nouselist = res;
				})
			},


			//查看pdf
			checkFile(item) {
				uni.downloadFile({
					url: this.baseImageUrl + item.url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},

			//打电话
			makePhone() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.detailsObject.customerTel,
					success() {
						// _self.onClose()
					}
				})
			},

			strSplit(str) {
				if (str !== '' && str != undefined) {
					return str.split(',')
				} else {
					return []
				}
			},

			//点击选择优惠券，弹出弹窗
			selCoupon() {
				if (this.canuselist.length > 0) {
					this.showCoupon = true
				}
			},

			//关闭优惠券弹窗
			closePop() {
				this.showCoupon = false
			},

			//费用项条目点击
			feeItemClick(item) {
				uni.navigateTo({
					url: './paiddetail' + uni.$u.queryParams(item)
				})
			},

			//优惠券弹窗上的确定按钮
			commitCoupon() {
				this.discountIndex = this.tempSelect;
				this.showCoupon = false
			},

			//优惠券条目点击
			couponItemclick(index) {
				if (this.selectUse === 0) {
					if (this.tempSelect === index) {
						this.tempSelect = -1;
					} else {
						this.tempSelect = index
					}

				}
			},

			//去支付
			btnClick() {

				uni.showLoading({
					title: '加载中'
				})

				var isSelectCoupon = this.discountItem && this.discountItem.memberId;

				let flag = isSelectCoupon ? 1 : 2;
				let couponNo = isSelectCoupon ? this.discountItem.memberId : '';
				let couponName = isSelectCoupon ? this.discountItem.couponName : '';
				let couponFaceValue = isSelectCoupon ? this.discountItem.money : '';
				let couponUseValue = isSelectCoupon ? this.discountItem.conditionMoney : '';
				let couponBizType = isSelectCoupon ? this.discountItem.useType : '';
				let couponTypeNo = isSelectCoupon ? this.discountItem.useTypeNo : '';
				let couponTypeName = isSelectCoupon ? this.discountItem.useTypeName : '';
				let couponData = isSelectCoupon ? this.discountItem.preferentialInfo : '';

				let url;
				if ("微信支付" == this.selType) {
					url = "/app/pay";
				} else if ("行知支付" == this.selType) {
					url = "/app/juhe/pay";
				}

				apppay({
					orderCarCode: this.detailsObject.orderCarCode,
					type: 2,
					orderCarId: this.detailsObject.orderCarId,
					couponFlag: flag,
					couponNo: couponNo,
					couponName: couponName,
					couponFaceValue: couponFaceValue,
					couponUseValue: couponUseValue,
					couponBizType: couponBizType,
					couponTypeNo: couponTypeNo,
					couponTypeName: couponTypeName,
					couponData: couponData,
					deptId: this.deptId,
				}, url).then(res => {
					uni.hideLoading()

					let resultData = res;

					//唤起微信支付
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						},
						fail: function(err) {
							paycancel({
								payRecordId: resultData.payRecordId
							}).then(res => {

							})

							console.log('fail:' + JSON.stringify(err));
						}
					});

				}).catch(e => {
					uni.hideLoading()
				})


			}

		}
	}
</script>

<style lang="scss" scoped>
	.top-status {
		height: 130upx;
		background-color: $green12;
		text-align: center;

		text {
			font-size: 36upx;
			color: $white;
			font-weight: bold;
			line-height: 130upx;
		}
	}

	.tenacy {
		font-size: 24upx;
		color: $yellowffc;
		padding: 3upx 8upx;
		border-radius: 8upx;
		border: 2upx solid $yellowffc;
		margin-left: 20upx;
	}

	.phone {
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;
	}

	.insurance-wrap {
		display: inline-flex;
		flex-wrap: wrap;
		margin: -10upx 0 20upx 20upx;

		text {
			@include flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 10upx 10upx 0 0;
			padding: 5upx 10upx;
			border-radius: 6upx;
			border: solid $graya7 2upx;
			font-size: 24upx;
			color: $black33;
		}

	}

	.fee-list {
		@include flex(column);
		padding: 0 20upx;

		.fee-item {
			@include flex;
			align-items: center;
			height: 70upx;
			justify-content: space-between;

			text {
				font-size: 24upx;
				color: $black33;
			}
		}
	}

	.coupon-wrap {
		@include flex;
		align-items: center;
		height: 95upx;
		padding: 0 40upx;

		&-title {
			flex-grow: 1;
			font-size: 28upx;
			color: $black33;
			font-weight: bold;
		}

		&-sel {
			font-size: 28upx;
			color: $black33;
			font-weight: bold;
		}
	}

	.pop {
		@include flex(column);
		padding: 30upx 50upx;

		.pop-title {
			font-size: 34upx;
			color: $black13;
			font-weight: bold;
			margin-top: -40upx;
		}

		&-top-wrap {
			display: flex;
			margin-top: 58upx;
		}

		.coupon-item {
			@include flex;
			align-items: center;

		}

		.pop-btn {
			width: 100%;
			height: 70upx;
			line-height: 70upx;
			border-radius: 14upx;
			background-color: $green12;
			text-align: center;
			color: $white;
			margin-top: 30upx;
			font-size: 32upx;
			font-weight: bold;
			letter-spacing: 5upx;
		}

	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	.wrap {
		// position: relative;
		// padding: 0upx 20upx;
		max-height: 600upx;
	}

	.cover {
		width: 643upx;
		height: 231upx;
		line-height: 231upx;

	}

	.content {
		position: relative;
		display: flex;
		// margin-top: 26upx;

		.leftContent {
			display: flex;
			position: absolute;
			top: 0;
			left: 22upx;
			justify-content: center;

			.amount {
				display: flex;
				width: 216upx;
				height: 190upx;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.couponAmount {
					display: flex;
					align-items: flex-start;
				}
			}

			.contentInfo {
				display: flex;
				flex-direction: column;
				width: 244upx;

				.useType {
					display: flex;
					margin-top: 15upx;
					justify-content: space-between;
					align-items: center;
				}
			}

		}

		.rightContent {
			display: flex;
			flex-direction: column;
			align-items: center;

			width: 174upx;
			position: absolute;
			top: 0;
			right: 0;
		}

	}

	.amount_unit {
		position: relative;
		top: 15upx;
	}

	.realAmount {
		font-size: 67upx;
		font-weight: bold;
		font-family: Eras Bold ITC, Eras Bold ITC-Regular;
		color: #333;
		text-align: center;
		// letter-spacing: -11upx;
	}

	.useInfo {
		// margin-top: 5upx;
		font-size: 21upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
	}

	.activity-name {
		margin-top: 40upx;
		color: #333;
		font-size: 20upx;
		font-weight: bold;
		font-family: PingFang SC, PingFang SC-Bold;
	}

	.time {
		margin-top: 25upx;
		color: #666;
		font-size: 16upx;
	}

	.conponType {
		font-size: 20upx;
		color: #666;
	}

	.arrow {
		width: 18upx;
		height: 18upx;
		margin-right: 48upx;
	}

	.conponType1 {
		color: #666;
		font-size: 22upx;
		margin-top: 24upx;
	}

	.button {
		width: 180upx;
		height: 56upx;
		line-height: 56upx;
		background: linear-gradient(0deg, #333333 0%, #614c2c 100%);
		border-radius: 28upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFDC2;
	}
</style>
